<template>
  <div>
      <el-form label-position="left" label-width="100px" v-model="detailColor">
        <el-form-item  label="类型">
          <el-select v-model="detailColor.option" placeholder="pure" size="mini">
            <el-option label="纯色" value="pure"/>
            <el-option label="渐变" value="linear"/>
          </el-select>
        </el-form-item>
        <div v-if="detailColor.option === 'linear'">
          <div v-for="(item, i) in detailColor.linear" :key="i">
            <el-divider content-position="center">渐变{{i+1}}</el-divider>
            <el-form-item label="起止色">
              <el-color-picker v-model="detailColor.linear[i].colorStops[0].color"  show-alpha size="small"></el-color-picker>
              <el-color-picker v-model="detailColor.linear[i].colorStops[1].color"  show-alpha size="small"></el-color-picker>
            </el-form-item>
            <el-form-item  label="起点坐标">
                <el-input-number v-model="detailColor.linear[i].x" :min="0" :max="1" size="mini"/>
                <el-input-number v-model="detailColor.linear[i].y" :min="0" :max="1" size="mini"/>
            </el-form-item>
            <el-form-item  label="终点坐标">
                <el-input-number v-model="detailColor.linear[i].x2" :min="0" :max="1" size="mini"/>
                <el-input-number v-model="detailColor.linear[i].y2" :min="0" :max="1" size="mini"/>
            </el-form-item>
          </div>
         </div>
        <div style="overflow:auto;width:220px"  v-if="detailColor.option === 'pure'">
          <div class='themecolor' v-for="(item, i) in color" :key="i" @click="pick(i)" :style="{ background: item}"></div>
      </div>
      <div v-if="detailColor.option === 'pure'"><sketch-picker  v-model="pickcolor" /></div>
      </el-form>
  </div>
</template>

<script>
import { Sketch } from 'vue-color'

export default {
  computed: {
    detailColor () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.color
    }
  },
  mounted () {
    var ini = this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.color.pure
    this.color = JSON.parse(JSON.stringify(ini))
  },
  data: function () {
    return {
      currentIndex: 0,
      color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
      pickcolor: 'rgba(194,53,49,1)'
    }
  },
  methods: {
    pick (n) {
      this.currentIndex = n
      this.pickcolor = this.color[this.currentIndex]
    }
  },
  watch: {
    pickcolor () {
      var val = this.pickcolor instanceof Object ? 'rgba(' + this.pickcolor.rgba.r + ',' + this.pickcolor.rgba.g + ',' + this.pickcolor.rgba.b + ',' + this.pickcolor.rgba.a + ')' : this.pickcolor
      this.color.splice(this.currentIndex, 1, val)
    },
    color: {
      handler (val) {
        this.$store.commit('updateDetailColorPure', val)
      },
      deep: true
    }
  },
  components: {
    'sketch-picker': Sketch
  }
}
</script>

<style scoped>
  .themecolor {
      width: 26.5px;
      height: 26.5px;
      float: left;
      padding: 5px;
      margin:5px;
      border: 1.5px solid rgb(66,66,66);
      border-radius:6px
  }
</style>
